<template>
    <div>
        <div class="admin-logo">
            <a href="/" style="text-decoration: none">
                <img v-if="isCollapse" class="small-logo" src="../assets/image/small-logo.png" alt="small-logo"/>
                <img v-else class="desktop-logo" src="../assets/image/logo.png" alt="desktop-logo"/>
            </a>
        </div>
        <div v-if="menuList != null && menuList.length > 0">
            <el-menu v-for="item in menuList" class="el-menu-vertical-demo"
                     style="border: none"
                     router
                     :default-active="$route.path"
                     background-color="#1A1D27"
                     text-color="#F0F0F0"
                     active-text-color="#5FB878"
                     :unique-opened="true"
                     :collapse="isCollapse"
                     :collapse-transition="false">

                <el-menu-item v-if="item.type === 0" :index="item.path">
                    <i :class="item.iconClass"></i>
                    <template #title>{{item.name}}</template>
                </el-menu-item>

                <el-submenu v-if="item.type === 1 && item.children != null && item.children.length > 0" :index="item.id + ''">
                    <template #title>
                        <i :class="item.iconClass"></i>
                        <span>{{item.name}}</span>
                    </template>
                    <div v-for="ch in item.children">
                        <el-menu-item v-if="ch.type === 0" :index="ch.path">
                            <i :class="ch.iconClass"></i> {{ch.name}}
                        </el-menu-item>
                        <el-submenu v-if="ch.type === 1 && ch.children != null && ch.children.length > 0" :index="ch.path">
                            <template #title>
                                <i :class="ch.iconClass"></i>
                                <span>{{ch.name}}</span>
                            </template>
                            <el-menu-item v-for="c in ch.children" :index="c.path">
                                <i :class="c.iconClass"></i> {{c.name}}
                            </el-menu-item>
                        </el-submenu>
                    </div>
                </el-submenu>

                <!--            <el-submenu index="/app">
                                <template #title>
                                    <i class="el-icon-resource"></i>
                                    <span>应用管理</span>
                                </template>
                                <el-resource-item index="/favorite">
                                    <i class="el-icon-star-off"></i> 我的收藏
                                </el-resource-item>
                            </el-submenu>-->
            </el-menu>
        </div>
    </div>
</template>

<script>
export default {
    name: "MainSider",
    props: {
        isCollapse: Boolean,
    },
    watch: {
        isCollapse() {
            this.collapse = this.isCollapse;
        },
    },
    mounted() {
        let _this = this
        this.$axios.get('/auth-local/role-resource/menu/tree?roleId=1').then(r => {
            if (r.code === 0) {
                _this.menuList = r.data
            } else {
                _this.$message.err(r.msg)
            }
        })
    },
    data() {
        return {
            collapse: false,
            menuList: [],
        };
    },
};
</script>

<style lang="scss">
.admin-logo {
    height: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;

    .desktop-logo {
        max-height: 40px;
    }

    .small-logo {
        max-height: 40px;
    }
}

.el-menu > .el-menu-item-group__title {
    color: #f0f0f0 !important;
}
</style>